/**
 * 🎨 vilan-admin-v1 过渡动画系统
 * 统一管理所有过渡动画效果
 */

/* ========================================
   1. 基础过渡变量
======================================== */
:root {
  /* 过渡时长 */
  --vilan-transition-fast: 0.15s;
  --vilan-transition-base: 0.3s;
  --vilan-transition-slow: 0.5s;
  
  /* 缓动函数 */
  --vilan-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --vilan-easing-enter: cubic-bezier(0, 0, 0.2, 1);
  --vilan-easing-exit: cubic-bezier(0.4, 0, 1, 1);
  
  /* 动画距离 */
  --vilan-slide-distance: 20px;
}

/* ========================================
   2. View Transition API 动画
======================================== */

/* 默认禁用所有元素的过渡动画 */
html::view-transition-old(*),
html::view-transition-new(*) {
  animation: none;
}

/* 只为根元素添加圆形扩散动画 */
html::view-transition-old(root) {
  z-index: 1;
  animation: vilan-clip-out var(--vilan-transition-slow) var(--vilan-easing-standard);
}

html::view-transition-new(root) {
  z-index: 9999;
  animation: vilan-clip-in var(--vilan-transition-slow) var(--vilan-easing-standard);
}

/* 深色模式下反转动画方向 */
html.dark::view-transition-old(root) {
  z-index: 9999;
  animation: vilan-clip-in var(--vilan-transition-slow) var(--vilan-easing-standard) reverse;
}

html.dark::view-transition-new(root) {
  z-index: 1;
  animation: none;
}

/* 圆形扩散动画 */
@keyframes vilan-clip-in {
  from {
    clip-path: circle(0% at var(--vilan-transition-x, 50%) var(--vilan-transition-y, 50%));
  }
  to {
    clip-path: circle(var(--vilan-transition-r, 100%) at var(--vilan-transition-x, 50%) var(--vilan-transition-y, 50%));
  }
}

@keyframes vilan-clip-out {
  from {
    clip-path: circle(var(--vilan-transition-r, 100%) at var(--vilan-transition-x, 50%) var(--vilan-transition-y, 50%));
  }
  to {
    clip-path: circle(0% at var(--vilan-transition-x, 50%) var(--vilan-transition-y, 50%));
  }
}

/* ========================================
   3. Vue Transition 动画类
======================================== */

/* 3.1 淡入淡出 (fade) */
.fade-enter-active,
.fade-leave-active {
  transition: opacity var(--vilan-transition-base) var(--vilan-easing-standard);
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* 3.2 淡入淡出 + 滑动 (fade-slide) */
.fade-slide-enter-active,
.fade-slide-leave-active {
  transition: 
    opacity var(--vilan-transition-base) var(--vilan-easing-standard),
    transform var(--vilan-transition-base) var(--vilan-easing-standard);
}

.fade-slide-enter-from {
  opacity: 0;
  transform: translateX(calc(-1 * var(--vilan-slide-distance)));
}

.fade-slide-leave-to {
  opacity: 0;
  transform: translateX(var(--vilan-slide-distance));
}

/* 3.3 从底部滑入 (slide-bottom) */
.slide-bottom-enter-active,
.slide-bottom-leave-active {
  transition:
    opacity var(--vilan-transition-base) var(--vilan-easing-standard),
    transform var(--vilan-transition-base) var(--vilan-easing-standard);
}

.slide-bottom-enter-from {
  opacity: 0;
  transform: translateY(var(--vilan-slide-distance));
}

.slide-bottom-leave-to {
  opacity: 0;
  transform: translateY(calc(-1 * var(--vilan-slide-distance)));
}

/* 3.4 从左侧滑入 (slide-left) */
.slide-left-enter-active,
.slide-left-leave-active {
  transition:
    opacity var(--vilan-transition-base) var(--vilan-easing-standard),
    transform var(--vilan-transition-base) var(--vilan-easing-standard);
}

.slide-left-enter-from {
  opacity: 0;
  transform: translateX(calc(-1 * var(--vilan-slide-distance)));
}

.slide-left-leave-to {
  opacity: 0;
  transform: translateX(var(--vilan-slide-distance));
}

/* 3.5 缩放 + 淡入淡出 (zoom-fade) */
.zoom-fade-enter-active,
.zoom-fade-leave-active {
  transition:
    opacity var(--vilan-transition-base) var(--vilan-easing-standard),
    transform var(--vilan-transition-base) var(--vilan-easing-standard);
}

.zoom-fade-enter-from {
  opacity: 0;
  transform: scale(0.92);
}

.zoom-fade-leave-to {
  opacity: 0;
  transform: scale(1.08);
}

/* ========================================
   4. 布局切换过渡（关键优化！）
======================================== */

/* 
  重要说明：
  - 布局切换需要保留过渡效果，让位置变化平滑进行
  - 只在主题切换时临时禁用过渡（避免颜色同时变化）
  - 使用 will-change 提升性能，但要适度使用
*/

/* 布局容器平滑过渡 */
.universal-layout {
  /* 不要添加 transition-all，会影响性能 */
}

/* 侧边栏平滑过渡 - 关键！*/
.global-sider,
.global-sider-wrapper {
  transition: 
    width var(--vilan-transition-base) var(--vilan-easing-standard),
    transform var(--vilan-transition-base) var(--vilan-easing-standard),
    left var(--vilan-transition-base) var(--vilan-easing-standard),
    opacity var(--vilan-transition-fast) var(--vilan-easing-standard);
  will-change: width, transform;
}

/* 主内容区平滑过渡 - 关键！*/
.layout-main {
  transition: 
    margin-left var(--vilan-transition-base) var(--vilan-easing-standard),
    margin-top var(--vilan-transition-base) var(--vilan-easing-standard),
    width var(--vilan-transition-base) var(--vilan-easing-standard);
  will-change: margin-left, margin-top;
}

/* 头部平滑过渡 */
.global-header {
  transition: 
    height var(--vilan-transition-base) var(--vilan-easing-standard),
    background-color var(--vilan-transition-fast) var(--vilan-easing-standard);
}

/* ========================================
   5. 主题切换过渡
======================================== */

/* 基础主题过渡 */
html,
html.dark {
  transition: 
    background-color var(--vilan-transition-base) var(--vilan-easing-standard),
    color var(--vilan-transition-base) var(--vilan-easing-standard);
}

/* 页面加载时的过渡类 */
body.vilan-theme-loading * {
  transition: none !important;
  animation: none !important;
}

/* ========================================
   6. 性能优化
======================================== */

/* 启用 GPU 加速 */
.fade-enter-active,
.fade-leave-active,
.fade-slide-enter-active,
.fade-slide-leave-active,
.slide-bottom-enter-active,
.slide-bottom-leave-active,
.slide-left-enter-active,
.slide-left-leave-active,
.zoom-fade-enter-active,
.zoom-fade-leave-active {
  will-change: opacity, transform;
}

/* 动画完成后移除 will-change */
.fade-enter-to,
.fade-leave-from,
.fade-slide-enter-to,
.fade-slide-leave-from,
.slide-bottom-enter-to,
.slide-bottom-leave-from,
.slide-left-enter-to,
.slide-left-leave-from,
.zoom-fade-enter-to,
.zoom-fade-leave-from {
  will-change: auto;
}

/* ========================================
   7. 响应式优化
======================================== */

/* 移动端减少动画时长，提升响应速度 */
@media (max-width: 768px) {
  :root {
    --vilan-transition-base: 0.2s;
    --vilan-transition-slow: 0.3s;
  }
}

/* 尊重用户的减弱动画偏好 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01s !important;
  }
}
